<template>
  <header class="header">
    <div class="header-content">
      <div class="logo-container">
        <router-link to="/" class="logo">
          <el-avatar :size="40" src="https://ext.same-assets.com/412138514/164083749.jpeg" />
          <span class="logo-text">大小哈的演示博客</span>
        </router-link>
      </div>

      <nav class="main-nav">
        <el-menu
          mode="horizontal"
          :ellipsis="false"
          :default-active="activeIndex"
          router
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/categories">分类</el-menu-item>
          <el-menu-item index="/tags">标签</el-menu-item>
          <el-menu-item index="/archives">归档</el-menu-item>
          <el-menu-item index="/knowledge">知识库</el-menu-item>
        </el-menu>
      </nav>

      <div class="header-actions">
        <el-switch
          v-model="isDark"
          inline-prompt
          :active-icon="Moon"
          :inactive-icon="Sunny"
          class="theme-switch"
          @change="toggleTheme"
        />

        <div class="search-box">
          <el-input
            v-model="searchText"
            placeholder="搜索文章..."
            :prefix-icon="Search"
            clearable
            @keyup.ctrl.k="showSearchModal"
          >
            <template #append>
              <el-button @click="showSearchModal">
                <span>Ctrl K</span>
              </el-button>
            </template>
          </el-input>
        </div>

        <el-button type="primary" @click="goToLogin">登录</el-button>
      </div>
    </div>

    <!-- 搜索模态框 -->
    <el-dialog
      v-model="searchModalVisible"
      title="搜索文章"
      width="600px"
      :show-close="true"
      class="search-dialog"
    >
      <el-input
        v-model="searchText"
        placeholder="输入关键词搜索..."
        :prefix-icon="Search"
        clearable
        @input="handleSearch"
      />
      <div class="search-results" v-if="searchResults.length > 0">
        <el-scrollbar height="400px">
          <div
            v-for="result in searchResults"
            :key="result.id"
            class="search-result-item"
            @click="goToArticle(result.id)"
          >
            <h3>{{ result.title }}</h3>
            <p>{{ result.excerpt }}</p>
          </div>
        </el-scrollbar>
      </div>
      <div v-else-if="searchText" class="no-results">
        未找到相关文章
      </div>
    </el-dialog>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Moon, Sunny, Search } from '@element-plus/icons-vue'
import { useTheme } from '../composables/useTheme'
import { articles } from '../data/articles'

const router = useRouter()
const searchText = ref('')
const activeIndex = ref('/')
const searchModalVisible = ref(false)
const searchResults = ref([])

const { isDark, toggleTheme } = useTheme()

const showSearchModal = () => {
  searchModalVisible.value = true
}

const handleSearch = () => {
  if (!searchText.value) {
    searchResults.value = []
    return
  }
  
  searchResults.value = articles.filter(article => 
    article.title.toLowerCase().includes(searchText.value.toLowerCase()) ||
    article.content.toLowerCase().includes(searchText.value.toLowerCase())
  ).map(article => ({
    id: article.id,
    title: article.title,
    excerpt: article.content.slice(0, 100) + '...'
  }))
}

const goToArticle = (id: number) => {
  router.push(`/articles/${id}`)
  searchModalVisible.value = false
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.header {
  background-color: var(--el-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--el-text-color-primary);
}

.logo-text {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-box {
  width: 250px;
}

.theme-switch {
  margin-right: 10px;
}

.search-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.search-results {
  margin-top: 20px;
}

.search-result-item {
  padding: 15px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-result-item:hover {
  background-color: var(--el-fill-color-light);
}

.search-result-item h3 {
  margin: 0 0 8px 0;
  color: var(--el-text-color-primary);
}

.search-result-item p {
  margin: 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.no-results {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 20px;
}

/* 重写Element Plus样式 */
:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  font-size: 16px;
}

:deep(.el-menu-item.is-active) {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  .main-nav, .header-actions {
    width: 100%;
    margin: 10px 0;
  }

  .search-box {
    width: 100%;
  }
}
</style>
